<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<style>
    body{
        background: url("imgs/bg.gif") repeat #0a0a0a;
        /*background-size: 1800px 1000px;*/
        margin: 0 auto;
    }
    .el-main{
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 60px;
        height: 1200px;
    }
    .el-aside{
        height: 1200px;
    }
</style>
<body>
<div id="app" >
    <div style="width: 1200px;margin: 0 auto">
        <el-container>
            <el-header style="background-color: #545c64">
                <!--      <img src="imgs/logo.png" alt="" style="width: 100px;height: 100px;">-->
                <img src="imgs/logo.png" alt=""
                     style="width: 50px;height: 50px;float:left;border-radius: 25px;position: relative;top: 10px;">
                <h1 style="font-size: 22px;color: white;font-family:Cambria;">
                    强盛健身网后台管理系统
                    <span>
                  <a href="" style="float: right;text-decoration: none;color: white">退出登录</a>
                 </span>
                </h1>

            </el-header>
            <el-container>
                <el-aside>
                    <div style="height: 1200px;background-color:#545c64">
                        <el-menu background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" @select="handleDelete">
                            <el-submenu index="1">
                                <template slot="title">首页</template>
                                <el-menu-item index="1-1">首页轮播图替换</el-menu-item>
                                <el-menu-item index="1-2">咨询内容替换</el-menu-item>
                            </el-submenu>
                            <el-submenu index="2">
                                <template slot="title">商城</template>
                                <el-menu-item index="2-1">健身商城物品上架下架</el-menu-item>
                                <el-menu-item index="2-2">健身咨询的编辑</el-menu-item>
                            </el-submenu>
                            <el-menu-item index="3">会员帐号管理</el-menu-item>
                            <el-menu-item index="4">社区内容管理</el-menu-item>
                        </el-menu>
                    </div>
                </el-aside>
                <el-container>
                    <el-main style="margin: 0;padding: 0;">
                        <!--会员帐号管理开始-->
                        <el-table
                                v-if="currentIndex==3"
                                :data="user"
                                style="width: 100%">
                            <el-table-column type="index" label="编号"></el-table-column>
                            <el-table-column
                                    prop="username"
                                    label="用户名"
                                    width="180">
                                <template slot-scope="scope">
                                    <el-popover trigger="hover" placement="top">
                                        <p>电话:{{scope.row.tel}}</p>
                                        <p>住址:{{scope.row.address}}</p>
                                        <div slot="reference" class="name-wrapper">
                                            <el-tag size="medium">{{ scope.row.username }}</el-tag>
                                        </div>
                                    </el-popover>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="nikename"
                                    label="昵称"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="vipstyle"
                                    label="vip类型"
                                    width="180">
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button
                                            size="mini"
                                            type="danger"
                                            @click="userDelete(scope.$index, scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!--会员帐号管理结束-->
                        <!--社区内容管理开始-->
                        <el-table
                                v-if="currentIndex==4"
                                :data="communityArr"
                                style="width: 100%">
                            <el-table-column type="index" label="编号"></el-table-column>
                            <el-table-column
                                    prop="date"
                                    label="日期"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="title"
                                    label="标题"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="author"
                                    label="作者"
                                    width="180">
                            </el-table-column>

                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button
                                            size="mini"
                                            type="danger"
                                            @click="communityArrDelete(scope.$index, scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!--社区内容管理结束-->
                    </el-main>
<!--                    <el-footer>-->
<!--                        <div></div>-->
<!--                    </el-footer>-->
                </el-container>


            </el-container>
        </el-container>
    </div>

</div>
</body>
<!-- import Vue before Element -->
<!--<script src="https://unpkg.com/vue@2/dist/vue.js"></script>-->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                currentIndex: "1-1",
                user:[{id:1,username:"张三",nikename:"法外狂徒",vipstyle:"白金会员",tel:12312123,address:"翻斗大街翻斗花园101号"},
                    {id:2,username:"张三",nikename:"法外狂徒",vipstyle:"白金会员",tel:12312123,address:"翻斗大街翻斗花园101号"},
                    {id:3,username:"张三",nikename:"法外狂徒",vipstyle:"白金会员",tel:12312123,address:"翻斗大街翻斗花园101号"},
                    {id:4,username:"张三",nikename:"法外狂徒",vipstyle:"白金会员",tel:12312123,address:"翻斗大街翻斗花园101号"},
                    {id:5,username:"张三",nikename:"法外狂徒",vipstyle:"白金会员",tel:12312123,address:"翻斗大街翻斗花园101号"},
                    {id:6,username:"张三",nikename:"法外狂徒",vipstyle:"白金会员",tel:12312123,address:"翻斗大街翻斗花园101号"}],
                communityArr:[{date:"2021年10月10日",title:"震惊!如此减脂只需要10天狂瘦20斤",author:"贾小溪"},
                    {date:"2021年10月10日",title:"震惊!如此减脂只需要10天狂瘦20斤",author:"贾小溪"},
                    {date:"2021年10月10日",title:"震惊!如此减脂只需要10天狂瘦20斤",author:"贾小溪"},
                    {date:"2021年10月10日",title:"震惊!如此减脂只需要10天狂瘦20斤",author:"贾小溪"},
                    {date:"2021年10月10日",title:"震惊!如此减脂只需要10天狂瘦20斤",author:"贾小溪"},
                    {date:"2021年10月10日",title:"震惊!如此减脂只需要10天狂瘦20斤",author:"贾小溪"},]
            }
        },
        methods: {

            userDelete(index,row) {
                if (confirm("您确定删除")) {
                    v.user.splice(index, 1);
                    v.$message("成功删除了"+row.username)
                }

            },
            communityArrDelete(index,row) {
                if (confirm("您确定删除")) {
                    v.communityArr.splice(index, 1);
                    v.$message("成功删除了"+row.title)
                }

            },
            handleDelete(key) {
                // if (key == 1) {
                //  confirm("该功能尚未开发")
                // }else if (key == 2) {
                //     confirm("该功能尚未开发")
                // }else if (key == 3) {
                //     v.currentIndex=index;
                // }else if (key == 4) {
                //     v.currentIndex=index;
                // }else {
                //
                // }
                v.currentIndex=key;
            }

        }
    })
</script>
</html>